<template>
  <div  class="tabbar"> 
    <div v-for="(item,index) in barList" :key="index" :class="['bar-item', activeIndex==index?'active':'']" @click="chooseThis(index)">
        <!-- <div :class="['iconfont', item.iconName]"></div> -->
        <img class="defult_img" :src="item.defult_img"  v-show="activeIndex!=index">
        <img class="active_img" :src="item.active_img"  v-show="activeIndex==index">
        <div class="bar-title">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
// import index_defult from '@/static/images/index_defult.png'
export default {
  props: {
     
  },
  data() {
    return { 
        activeIndex: 0 ,
        barList:[ 
            {
              hidden:false,
              name:'首页',
              iconName:'iconshouye',
              defult_img:require('../../static/images/index_defult.png'),
              active_img:require('../../static/images/index_active.png'),
            },
            {
              hidden:false,
              name:'我的',
              iconName:'iconmy',
              defult_img:require('../../static/images/my_defult.png'),
              active_img:require('../../static/images/my_active.png')
            }
        ]
    };
  },
  watch: {
     
  },
  mounted() {
    this.setActive();
  },
  activated(){
    this.setActive();
  },
  beforeDestroy() {
  },
  methods: {
    setActive(){
      const path = this.$route.path; 
      if(path == '/my'){
        this.activeIndex = 1;    //我的
      }else{
        this.activeIndex = 0;
      }
    },
    chooseThis(index){
      if(index == this.activeIndex){
        return ;
      }
      this.activeIndex = index;
      if(index==0){
        this.$router.push({path:'/entirety'})
      }else if(index==1){ // 我的
        this.$router.push({path:'/my'})
      }
    }
  }
};
</script>

<style lang="less" scoped>
.defult_img,.active_img{
  width: 0.56rem;
  height: 0.56rem;
}


.tabbar{
    display: flex; 
    height: 1.07rem; 
    box-shadow: 0px 0px 30px 8px rgba(2, 2, 2, 0.09);
    z-index: 997;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 14px;
    width: 100vw; 
    border-top: 1px solid #f7f7f7;
    .bar-title{
      font-size: 0.24rem;
    }
    .bar-item{
      .iconfont{
        font-size: 0.32rem;
      }
        flex: 1;
        text-align: center;
        &.active{
            color: #fa1900;
        }
    }
}
</style>